import React, { Component } from "react";
import { View, Text, Image, StyleSheet, SectionList, TouchableWithoutFeedback } from "react-native";
import * as RootNavigation from '../../../App'
import NetUtil from '../../net/net_util'

export default class TopicList extends Component{
  constructor(props) {
    super(props);
    this.state={
      sections:[
        { key: "我关注的", data: [] },
        { key: "全部话题", data: [] }
      ]
    }
  }

  componentDidMount() {
    this.getMyFocusTopicList()
    this.getAllTopicList()
  }

  /*获取我关注的话题*/
  getMyFocusTopicList(){
    NetUtil.get('trend/topic/my/topic',{},(res)=>{
      if(res.code==200){
        let sections=this.state.sections;
        sections[0].data=res.data
        this.setState({sections:[...sections]})
      }
    })
  }

  /*获取全部话题*/
  getAllTopicList(){
    NetUtil.get('trend/topic/topic/page',{pageNum:1,pageSize:10},(res)=>{
      if(res.code==200){
        let sections=this.state.sections;
        sections[1].data=res.data.data
        this.setState({sections:[...sections]})
      }
    })
  }

  goToDetail(item){
    RootNavigation.navigate('TopicDetail',{id:item.id})
  }


  _renderTopicCell=(info)=>{
    let item=info.item
    return (
      <TouchableWithoutFeedback onPress={()=>{this.goToDetail(item)}}>
        <View style={styles.cell}>
          <Image style={styles.topicIcon} source={{uri:item.thumb}}></Image>
          <View style={styles.topicInfo}>
            <Text style={{color:'#0F0F0F',fontSize:15,fontWeight:'500'}}><Text style={{color:'#3CA1FD',fontSize:15,fontWeight:'600'}}>#</Text>{item.name}</Text>
            <Text style={{color:'#A6A6A6',fontSize:11,marginTop:18}}>讨论 {item.trendNum}万</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }
  _sectionComp = (info) => {
    let txt = info.section.key;
    let dataList=info.section.data
    if(dataList.length>0){
      return <Text
        style={{ height: 36,lineHeight:36,paddingLeft:15, textAlignVertical: 'center', backgroundColor: '#fff', color: '#777777', fontSize: 13 }}>{txt}</Text>
    }
    else{
      return null
    }
  }

  _sectionFooter=(info)=>{
    let dataList=info.section.data
    if(dataList.length>0&&info.section.key=='我关注的'){
      return (
        <TouchableWithoutFeedback>
          <View>
            <View style={styles.footer}>
              <Text style={{color:'#888888',fontSize:12}}>查看全部</Text>
              <Image style={styles.enterIcon} source={require('../../img/enter_icon.png')}></Image>
            </View>
            {this._separator()}
          </View>
        </TouchableWithoutFeedback>
      )
    }
    else {
      return null
    }
  }
  _separator(){
    return <View style={{backgroundColor:'#F6F6F6',height:5}}></View>
  }
  render(){
    return(
      <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
        <SectionList renderSectionHeader={this._sectionComp}
                     renderSectionFooter={this._sectionFooter}
                     renderItem={this._renderTopicCell}
                     showsVerticalScrollIndicator={false}
                     keyExtractor={(item)=>item.id}
                     sections={this.state.sections}>
        </SectionList>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  /**cell*/
  cell:{
    padding:15,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'flex-start'
  },
  knowledgeIcon:{
    width:115,
    height:65
  },
  info:{
    flex:1
  },
  infoIcon:{
    width:97,
    height:65,
    borderRadius: 7
  },
  infoFooter:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    marginTop:15
  },
  topicIcon:{
    width:55,
    height:55,
    borderRadius:7
  },
  topicInfo:{
    marginLeft:12
  },
  footer:{
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    height:44,
    backgroundColor:'#fff'
  },
  enterIcon:{
    width:12,
    height:12,
    marginLeft:5
  }
})
